<template>
  <view>
    <view class="userinfo-index">
      <view class="userinfo-topicon">
        <image src="https://s2.loli.net/2022/05/05/EMYeLdJQt7s6uF4.png"></image>
        <!-- <view class="userinfo-topmodify" @click="gotoModify">
          <text>修改</text>
        </view> -->
      </view>
      <uni-list class="setting-list">
        <uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon1" title="昵称" clickable="true" @click="inputDialogToggle(1)" class="setting-item" :rightText="userinfoo.nickname ? userinfoo.nickname : userinfo.nickName"/>
        <uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon4" title="性别" clickable="true" class="setting-item" :rightText="userinfoo.sex === 0 ? '男' : '女'" @click="inputDialogToggle(4)"/>
        <uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon2" title="邮箱" clickable="true" class="setting-item" :rightText="userinfoo.email" @click="inputDialogToggle(2)"/>
        <uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon3" title="手机号码" class="setting-item" clickable="true" @click="inputDialogToggle(3)" :rightText="userinfoo.mobile"/>
      </uni-list>
      <view>
        <!-- 输入框示例 -->
        <uni-popup ref="inputDialog1" type="dialog">
          <uni-popup-dialog ref="inputClose"  mode="input" title="请输入新昵称" placeholder="请输入新昵称" @confirm="dialogInputConfirm"></uni-popup-dialog>
        </uni-popup>
        <uni-popup ref="inputDialog2" type="dialog">
          <uni-popup-dialog ref="inputClose"  mode="input" title="请输入新邮箱" placeholder="请输入新邮箱" @confirm="dialogInputConfirm"></uni-popup-dialog>
        </uni-popup>
        <uni-popup ref="inputDialog3" type="dialog">
          <uni-popup-dialog ref="inputClose" mode="input" title="请输入新手机号码" placeholder="请输入新手机号码" @confirm="dialogInputConfirm"></uni-popup-dialog>
        </uni-popup>
        <!-- 选择性别 -->
        <uni-popup ref="popup" background-color="#fff">
          <view class="popup-title">
            <text>性别选择</text>
          </view>
          <view class="popup-content">
            <view class="popup-content-item" @click="selectSex(0)">
              <radio checked color="#3BD1C1" v-if="!sexIndex" class="sexRadio"></radio>
              <image src="https://s2.loli.net/2022/05/21/KrQtC9VOsagjTMz.png" mode=""></image>  
            </view>
            <view class="popup-content-item" @click="selectSex(1)">
              <radio checked color="#3BD1C1" v-if="sexIndex" class="sexRadio"></radio>
              <image src="https://s2.loli.net/2022/05/21/k9sUpYFuRdGz51w.png" mode=""></image>
            </view>
          </view>
          <view class="popup-comfirm">
            <button type="default" @click="dialogInputConfirm">确定</button>
          </view>
        </uni-popup>
      </view>
    </view>
  </view>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
  export default {
    data() {
      return {
        userinfoo: {},
        sexIndex: '',
        index: ''
      };
    },
    computed: {
      ...mapState('user_module',['username','usersex','updateUserEmail','userphone']),
    },
    methods: {
      ...mapMutations('user_module',['updateUserName','updateUserPhone','updateUserEmail','updateUserSex','updateUserId']),
      //弹出层输入框
      dialogInputConfirm(val) {
          if(this.sexIndex !== '') {
            this.updateUserSex(this.sexIndex)
            console.log(this.sexIndex)
          }
          if(this.index == 1) this.updateUserName(val)
          else if(this.index == 2) this.updateUserEmail(val)
          else if(this.index == 3) this.updateUserPhone(val)
          const query = {
            nickname: uni.getStorageSync('username') || null,
            mobile: uni.getStorageSync('userphone') || null,
            email: uni.getStorageSync('useremail') || null,
            sex: uni.getStorageSync('usersex'),
            id: uni.getStorageSync('userid')
          }
          console.log(query)
          uni.$http.post('/api/user/index/editUserInfo',query).then(res => {
            console.log(res)
            if(res.data.code !== 200) {
              if(this.index == 1) return uni.$showMsg('昵称最少2个字符') 
              else if(this.index == 2) return uni.$showMsg('请输入正确的邮箱') 
              else if(this.index == 3) return uni.$showMsg('请输入正确的手机号码')
            }
            this.getUserInfo()
            this.$refs.popup.close()
            uni.$showMsg("修改成功！")
        }).catch(err => uni.$showMsg('网络错误！'))
      },
      inputDialogToggle(index) {
          this.index = index
          if(index == 1) this.$refs.inputDialog1.open()
          else if(index == 2) this.$refs.inputDialog2.open()
          else if(index == 3) this.$refs.inputDialog3.open()
          else if(index == 4) this.$refs.popup.open()
      },
      //性别选择
      selectSex(sexIndex) {
        this.sexIndex = sexIndex
        console.log(this.sexIndex)
      },
      // 修改信息
      gotoModify() {
        uni.navigateTo({
          url: '../userinfoModify/userinfoModify'
        })
      },
      // 获取用户信息
      async getUserInfo() {
        const {data:{data:{currentUser:res}},data:info} = await uni.$http.post('/api/user/index/getUserInfo').catch(err => uni.$showMsg('网络错误！'))
        if(info.code !== 200) return uni.$showMsg('获取用户信息失败，请重新尝试！')
        this.userinfoo = res
        if(this.userinfoo.sex !== 0 && this.userinfoo.sex !== 1) this.userinfoo.sex = 0 
        console.log(this.userinfoo)
        this.sexIndex = this.userinfoo.sex
        this.updateUserName(this.userinfoo.nickname)
        this.updateUserPhone(this.userinfoo.mobile)
        this.updateUserEmail(this.userinfoo.email)
        this.updateUserSex(this.userinfoo.sex)
        this.updateUserId(this.userinfoo.id)
      }
    },
    computed: {
      ...mapState('user_module',['username','userphone','useremail','useraddress','userinfo'])
    },
    onShow() {
      this.getUserInfo()
    }
  }
</script>

<style lang="scss">
  .userinfo-index {
    margin: 30rpx 20rpx;
    border: 1px solid #ECF5FF;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    .userinfo-topicon {
      position: relative;
      display: flex;
      padding: 36px 0;
      justify-content: center;
      align-items: center;
      image {
        width: 90rpx;
        height: 90rpx;
      }
      .userinfo-topmodify {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        // padding: ;
        border-radius: 13% 8px 15% 70%;
        background-color: #FED847;
        right: 0;
        top: 0;
        text {
          font-size: 14px;
        }
      }
    }
    .userinfo-item {
      border-bottom: 1px solid #F0F0F0;
      padding: 10px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text {
        font-size: 14px;
      }
    }
    .userinfo-phone {
      padding: 10px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text {
        font-size: 14px;
      }
    }
  }
  //性别弹出层
  .popup-title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
  }
  .popup-content {
    display: flex;
    justify-content: center;
    align-items: center;
    .popup-content-item {
      position: relative;
      border-top: 1px solid #E6E6E6;
      .sexRadio {
        position: absolute;
        top: 10px;
        right: 12px;
      }
      image {
        margin: 10px 10px;
        width: 100px;
        height: 100px;
      }
    }
  }
</style>

